<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="_fragments :: head(~{::title})">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>博客管理修改个人信息</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
  <link rel="stylesheet" href="../../static/css/me.css">
</head>
<body>

<br>
<br>
<br>
 <div class="m-container-small m-padded-tb-massive" style="max-width: 30em !important;">
   <div class="ur container">
     <div class="ui middle aligned center aligned grid">
       <div class="column">
         <h2 class="ui teal image header">
           <div class="content">
             修改个人信息
           </div>
         </h2>
         <form class="ui large form" method="post" action="#" th:action="@{/before/upUser}" enctype="multipart/form-data">
           <div class="ui  segment">
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="nickname" autocomplete="off" value="" th:value="${session.user.nickname}" required>
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                  <input type="text" name="username" autocomplete="off" value="" th:value="${session.user.username}" required>
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="lock icon"></i>
                 <input type="password" name="password" value="" th:value="${session.user.password}" required>
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="text" name="email" autocomplete="off" value="" th:value="${session.user.email}" required>
               </div>
             </div>
             <div class="field">
               <div class="ui left icon input">
                 <i class="user icon"></i>
                 <input type="file" name="avatar" value="5M以内的图片" id="file_id"  accept=".jpg,.png" onchange="fileChange(this);" placeholder="头像">
                 <script th:inline="javascript">
                     function fileChange(target) {
                         var fileSize = 0;
                         fileSize = target.files[0].size;
                         var size = fileSize / 1024;
                         if(size>5000){
                             alert("头像不能大于5M");
                             target.value="";
                             return false;   //阻止submit提交
                         }
                         var name=target.value;
                         var fileName = name.substring(name.lastIndexOf(".")+1).toLowerCase();
                         if(fileName !="jpg" && fileName !="png"){
                             alert("请选择图片格式文件上传(jpg、png)！");
                             target.value="";
                             return false;   //阻止submit提交
                         }
                     }
                 </script>
               </div>
             </div>
             <button class="ui fluid large teal submit button">修   改</button>
             <p />
             <h3><a href="/before/index" style="color:white" class="ui fluid large teal submit button"><strong>返回</strong></a></h3>
           </div>

           <div class="ui error mini message"></div>
           <div id="bbbbb" class="ui mini negative message" th:unless="${#strings.isEmpty(message)}" th:text="${message}">更新失败</div>
           <!--让提示框在5秒后消失-->
           <script type="text/javascript">
               setTimeout(function(){document.getElementById("bbbbb").style.display="none";},5000);
           </script>
           <!--让提示框在3秒后消失-->
         </form>

       </div>
     </div>
   </div>
 </div>

<!--/*/<th:block th:replace="_fragments :: script">/*/-->
<script src="https://cdn.jsdelivr.net/npm/jquery@3.2/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<!--/*/</th:block>/*/-->

<!--<script>-->
  <!--$('.ui.form').form({-->
    <!--fields : {-->
        <!--nickname : {-->
            <!--identifier: 'nickname',-->
            <!--rules: [{-->
                <!--type : 'empty',-->
                <!--prompt: '请输入昵称'-->
            <!--}]-->
        <!--},-->
        <!--username : {-->
            <!--identifier: 'username',-->
            <!--rules: [{-->
                <!--type : 'empty',-->
                <!--prompt: '请输入用户名'-->
            <!--}]-->
        <!--},-->
        <!--password : {-->
            <!--identifier: 'password',-->
            <!--rules: [{-->
                <!--type : 'empty',-->
                <!--prompt: '请输入密码'-->
            <!--}]-->
        <!--},-->
        <!--email : {-->
            <!--identifier: 'email',-->
            <!--rules: [{-->
                <!--type : 'empty',-->
                <!--prompt: '请输入邮箱'-->
            <!--}]-->
        <!--}-->
    <!--}-->
  <!--});-->
<!--</script>-->

</body>
</html>